<template>
	<view class="item">
		<view class="left">
			<radio @click="show" v-if="showRadio" color="#c00000" :checked="item.goods_status"></radio>
			<image :src="item.goods_small_logo" mode="widthFix"></image>
		</view>

		<view class="right">
			<view class="title">
				{{item.goods_name}}
			</view>
			<view class="price">
				￥{{item.goods_price }}
				<uni-section title="基本用法" type="line">
					<uni-number-box @change="changeValue" v-if="showRadio" :value="item.goods_count" mix="0"
						max="999" />
				</uni-section>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		name: "my-goods",
		props: ['item', 'showRadio'],
		data() {
			return {

			};
		},
		methods: {
			show() {
				this.$emit('changeRadio', {
					goods_id: this.item.goods_id,
					goods_status: !this.item.goods_status
				})
			},
			// 购物车数量改变
			changeValue(value) {
				// console.log('返回数值：', value);
				if (/^\d+$/.test(+value)) {
					this.$emit('changeNumber', {
						goods_id: this.item.goods_id,
						goods_count: value
					})
				}
			},


		}
	}
</script>

<style lang="scss">
	.item {
		padding: 10px 10px;
		height: 100px;
		display: flex;
		border-bottom: 1px solid #eef;
		font-size: 12px;

		.left {
			display: flex;
			align-items: center;

			image {
				width: 200rpx;
				height: 200rpx;
				margin-right: 20rpx;
			}
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {}

			.price {
				color: red;

				font-size: 14px;
				display: flex;
				justify-content: space-between;


			}

		}
	}
</style>
